<template>
    <Category />

    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top:30px">
    <SpuList v-if="showState === 0" @changeShowState='changeShowState'/>
    <SpuForm v-if="showState === 1" @changeShowState='changeShowState' :newSpuInfo='newSpuInfo'/>
    <SkuForm v-if="showState === 2" @changeShowState='changeShowState' :newSpuInfo='newSpuInfo'/>
    </el-card> 
</template>

<script lang="ts">
import { defineComponent } from "vue";


export default defineComponent({
    name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import SpuForm from "./components/SpuForm/index.vue";
import SkuForm from "./components/SkuForm/index.vue";
import SpuList from "./components/SpuList/index.vue";
import type { SpuInfoType } from "@/api/spu";

//引入小菠萝拿到3id
import useAttrStore from "@/stores/attr";
import { storeToRefs } from "pinia";
const AttrStore=useAttrStore()
const {category3Id} = storeToRefs(AttrStore)

//声明一个数据,控制视图中的哪一个组件渲染
const showState = ref(0);

//创建一个初始值，用来给新增和修改进行提交
const newSpuInfo=ref<SpuInfoType>({
  category3Id: category3Id.value,
  description: '',
  spuName: '',
  tmId: null,
  spuImageList: [],
  spuSaleAttrList: []
})

//创建一个自定事件，传递给Spulist
const changeShowState = (val:number,row?:SpuInfoType)=>{
    showState.value = val

    //判断是否携带数据
    if(row){
        //如果有row，则初始值获取这个数据，
        //传给组件回填
        newSpuInfo.value = row //因为这里在组件切换，那边传值过来切换了组件，原数据就没有了
    }else{
        //如果没有row，还原空值
        newSpuInfo.value={
            category3Id: category3Id.value,
            description: '',
            spuName: '',
            tmId: null,
            spuImageList: [],
            spuSaleAttrList: []
        }
    }

    //如果是row进去的SPU则携带数据进入
} 
</script>